<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>

<head>
    <%@ include file="/include/head.jsp"%>
    <title></title>
    <style type="text/css">
        .imgLogo {
            position: relative;
        }
        .imgLogo img {
            width: 48px;
        }
        .messageCountLabel {
            position: absolute;
            top: -6px;
            right: -8px;
            display: inline-block;
            width: 18px;
            height: 18px;
            font-size: 14px;
            border: 1px solid #e4393c;
            background-color: #fff;
            line-height: 16px;
            text-align: center;
            border-radius: 50%;
            color: #e4393c;
        }
    </style>
    <script src="${rootPath}/static/js/indexMessage.js" type="text/javascript"></script>
    <script>
        mui.init();
        //页面基础配置
        $(function(){
            initMessageVueObj();
        })
    </script>
</head>

<body>
<!-- 主页面标题 -->
<header class="mui-bar mui-bar-nav qy-bg-white qy-border-bottom" id="messageControl">
    <a class="mui-pull-left qy-text-black mui-icon" style="height: 44px;overflow: hidden;width: 54px;border-radius: 50%;padding-top: 5px;padding-bottom: 5px;">
        <img src="${rootPath}/static/imgs/indexUserTouxiang.png" style="width: 100%;" alt=""/>
    </a>
    <h1 class="mui-title qy-flex qy-flex-text-center">
        消息
    </h1>
    <span v-if="!isEdit" class="mui-icon mui-pull-right qy-position-relative qy-flex qy-flex-text-right qy-full-height qy-font-size-16px" v-on:click="edit">
        编辑
    </span>
    <span v-else class="mui-icon mui-pull-right qy-position-relative qy-flex qy-flex-text-right qy-full-height qy-font-size-16px" v-on:click="edit">
        完成
    </span>
</header>
<%@ include file="/include/footer-index.jsp"%>
<div id="messageBoxFooter" class="footerMessage qy-bg-white qy-border-top qy-flex qy-flex-text-between qy-flex-fullHeight" v-if="isEdit">
    <div class="mui-col-xs-col-3 qy-flex">
        <div class="controlCheckBox qy-margin-vertical-8px">
            <div class="mui-checkbox">
                <input name="checkbox" value="" type="checkbox" v-on:click="selectAll" v-bind:checked="isSelect">
            </div>
        </div>
        <span class="qy-font-size-14px">
            全选
        </span>
    </div>
    <div v-if="!hasSelectItem" class="mui-col-xs-3 qy-flex qy-flex-text-center qy-text-white qy-font-size-16px qy-bg-grayc">
        标为已读
    </div>
    <div v-else class="mui-col-xs-3 qy-flex qy-flex-text-center qy-text-white qy-font-size-16px qy-bg-blue" v-on:click="setToChecked">
        标为已读
    </div>
</div>
<div class="mui-content" tabNum="2">
    <div id="messageBox" class="qy-margin-top-4px qy-padding-left-8px qy-bg-white">
        <div class="qy-flex qy-flex-fullHeight qy-border-bottom qy-padding-horizontal-8px qy-padding-right-8px" v-for="message in messageMainList">
            <div :class="{'mui-col-xs-2':!isEdit,'mui-col-xs-3':isEdit}" class="qy-flex">
                <div class="controlCheckBox qy-margin-right-8px" v-if="isEdit">
                    <div class="mui-checkbox">
                        <input name="checkbox" value="" type="checkbox" v-bind:checked="message.isSelect" v-on:click="select(message)">
                    </div>
                </div>
                <div class="imgLogo">
                    <img src="${rootPath}/static/imgs/logoMessage01.png" alt="">
                    <span class="messageCountLabel" v-show="message.unCheckedMessageCount>0">{{message.unCheckedMessageCount}}</span>
                </div>
            </div>
            <div :class="{'mui-col-xs-10':!isEdit,'mui-col-xs-9':isEdit}" class="qy-flex qy-flex-direction-column qy-flex-fullWidth">
                <div class="qy-flex qy-flex-equalSpace qy-flex-text-between">
                    <span>{{message.name}}</span>
                    <small class="qy-text-label">{{message.lastMessage.createTime}}</small>
                </div>
                <div class="qy-flex qy-flex-equalSpace">
                    <span class="qy-font-size-14px mui-block nowrap">
                        {{message.lastMessage.content}}
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

</html>